<template>
    <div class="tableviewContainer">
        <div class="screenRow">
            <slot name="inputRow"></slot>
        </div>
        <div class="quota">
            <span>指标池：</span>
            <el-checkbox-group v-model="checkboxGroup_value">
                <el-checkbox @change="selectionBoxChange" :checked="selectionVisible" label="全选" />
                <el-checkbox @change="indexBoxChange" :checked="indexVisible" label="本页序号" />
                <el-checkbox
                    @change="checkboxChange(item)"
                    v-for="item in colSelectClone"
                    :key="item.label"
                    :checked="item.show"
                    :label="item.label"
                />
            </el-checkbox-group>
        </div>

        <div class="btnRows">
            <slot name="btn"></slot>
        </div>
        <div class="tableTitle">{{ title }}</div>

        <div class="tableContainer">
            <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                ref="tableDataRef"
                style="width: 100%"
                border
                :header-cell-style="{ background: '#F5F7F9' }"
            >
                <el-table-column
                    width="80"
                    align="center"
                    v-if="selectionVisible"
                    type="selection"
                />
                <el-table-column width="90" align="center" v-if="indexVisible" label="本页序号">
                    <template #default="scope">
                        <div v-if="scope.$index < tableData.length-2">{{ scope.$index + 1 }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    v-for="(item, index) in columnDataClone"
                    :key="index"
                    :prop="item.props"
                    :label="item.label"
                    :width="item.width"
                    :type="item.type"
                    align="center"
                    stripe
                >
                    <template #default="scope">
                        <div v-if="item.slot">
                            <div v-if="item.slot == 'image'">
                                <img :src="scope.row.avatar" />
                            </div>
                            <div v-if="item.slot == 'action'">
                                <slot v-if="scope.$index < tableData.length-2" name="action"></slot>
                            </div>
                        </div>
                        <div v-else>{{ scope.row[item.props] }}</div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagnitionContainer">
                <el-config-provider :locale="locale">
                    <el-pagination
                        v-model:currentPage="currentPage"
                        :page-sizes="[5, 10, 20, 50]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </el-config-provider>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { ref, defineComponent, PropType, watch, toRefs, getCurrentInstance, nextTick, toRef, onMounted } from "vue"
import { ElConfigProvider } from 'element-plus'
import zhCn from "element-plus/lib/locale/lang/zh-cn"
export default defineComponent({
    name: 'SysTable',
    emits: { 'size-change': null, 'current-change': null, 'select-all': null },
    props: ['title', 'columnData', 'currentPage', 'pageSize', 'total', 'handleSizeChange', 'handleCurrentChange', 'tableData'],
    components: { [ElConfigProvider.name]: ElConfigProvider },
    setup(props, ctx) {
        // 实例
        const Instance = getCurrentInstance() as any
        let locale = zhCn

        /* 全选和序号指标池，和其他的分开处理 */
        const selectionVisible = ref(true)
        const indexVisible = ref(true)
        const checkboxGroup_value = ref([])
        const selectionBoxChange = (val) => { selectionVisible.value = val, Instance.refs.tableDataRef.doLayout() }
        const indexBoxChange = (val) => { indexVisible.value = val, Instance.refs.tableDataRef.doLayout() }

        /* 指标池复选框发生改变后联动表格动态删减表格列的方法 */
        const { columnData } = toRefs(props)
        let colSelectClone = JSON.parse(JSON.stringify(columnData.value))
        let columnDataClone = ref(columnData.value)
        let columnDataClone_backup = JSON.parse(JSON.stringify(columnData.value))

        const addIndex = (arr) => { return arr.forEach((item, index) => { item.index = index }) }
        const compare = (property) => {
            return function (a, b) {
                var value1 = a[property];
                var value2 = b[property];
                return value1 - value2;
            }
        }
        const checkboxChange = (current) => {
            if (current.show) {
                columnDataClone.value.forEach((item, index) => {
                    if (item.label == current.label) {
                        columnDataClone.value.splice(index, 1)
                    }
                });
                console.log(colSelectClone, 'splice colSelectClone')
                nextTick(() => {
                    Instance.refs.tableDataRef.doLayout()
                })
            } else {
                const el = columnDataClone_backup.find((item) => { return current.label == item.label })
                columnDataClone.value.push(el)
                columnDataClone.value.sort(compare('index'))
                nextTick(() => {
                    Instance.refs.tableDataRef.doLayout()
                })
            }
            const columnIndex = colSelectClone.findIndex((item) => { return current.index == item.index })
            colSelectClone[columnIndex].show = !current.show
        }

        /* 表格变量和方法 */
        const { tableData } = toRefs(props)
        const handleSelectionChange = (all) => {
            ctx.emit('select-all', all)
        }
        /* panination相关变量和方法 */
        const { total, pageSize, currentPage } = toRefs(props)
        const handleSizeChange = (size) => {
            ctx.emit('size-change', size)
        }
        const handleCurrentChange = (currentPage) => {
            ctx.emit('current-change', currentPage)
        }


        onMounted(() => {
            // nextTick为了解决type = selection / index / expand不生效的问题，
            nextTick(Instance.refs.tableDataRef.doLayout())
            addIndex(colSelectClone)
            addIndex(columnDataClone_backup)
            const j = JSON.parse(JSON.stringify(columnData.value))
            addIndex(j)
            console.log(j, 'jjjjjjjjjjjjjjjjjjjj')

        })

        return {
            tableData,
            handleSelectionChange,
            colSelectClone,
            checkboxChange,
            columnDataClone,
            currentPage,
            pageSize,
            handleSizeChange,
            handleCurrentChange,
            total,
            indexVisible,
            selectionVisible,
            selectionBoxChange,
            indexBoxChange,
            locale,
            checkboxGroup_value
        }
    }
})
</script>

<style lang="scss" scoped>
.tableviewContainer {
    font-size: 14px;
    .tableTitle {
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        margin: 80px 0;
        margin-top: 20px;
    }
    .screenRow {
        margin-bottom: 20px;
    }
    .quota {
        display: flex;
        align-items: center;
    }
    .tableContainer {
        margin-top: 40px;
    }
    ::v-deep(.el-table__header-wrapper) {
        .el-table-column--selection {
            &::after {
                content: "全选";
                position: absolute;
                left: 10px;
                top: 12px;
            }
            .cell {
                padding-left: 46px;
            }
        }
    }
    ::v-deep(.el-table-column--selection) {
        .cell {
            padding-left: 15px;
        }
    }

    ::v-deep(.el-table__row:nth-last-child(2)) {
        .el-table-column--selection {
            &::after {
                content: "本页小计";
                left: 0px;
                position: relative;
            }
            .cell {
                display: none !important;
            }
        }
    }

    ::v-deep(.el-table__row:nth-last-child(1)) {
        .el-table-column--selection {
            &::after {
                content: "合计";
                left: 0px;
                position: relative;
            }
            .cell {
                display: none !important;
            }
        }
    }
}
</style>